<template lang="pug">
.edit
  .edit-container
    .edit-header 修改密码
    el-form.edit-form(
      :model="form"
      :rules="formRules"
      ref="editForm"
      size="small"
      label-width="150px"
    )
      el-form-item(label="登录账号：" required)
        el-input(placeholder="请输入登录账号" v-model="userInfo.userName" readonly)
      el-form-item(label="已认证手机号：" required)
        el-input(placeholder="请输入手机号" v-model="userInfo.mobile" readonly)
          .edit-form-handle(slot="suffix", :class="time && 'disabled'" @click="sendCode") {{time ? '重发验证码'+ time : '获取验证码'}}
      el-form-item(label="验证码：" prop="msgCode")
        el-input(placeholder="请输入验证码" v-model="form.msgCode" autocomplete="new-password")
      el-form-item(label="新密码：" prop="password")
        el-input(type="password" placeholder="请输入新密码" v-model="form.password" autocomplete="new-password")
      el-form-item(label="确认新密码：" prop="passwordReset")
        el-input(type="password" placeholder="请确认新密码" v-model="form.passwordReset" autocomplete="new-password")
      el-form-item
        el-button(type="primary" @click="confirm") 确认
</template>

<script>
import { toResetPassword, toSendMsg } from 'api'
import { mapState, mapActions } from 'vuex'
import { hex_md5_salt } from 'utils/md5'
let timer = null
export default {
  name: 'changePwd',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        mobile: '',
        password: '',
        passwordReset: '',
        msgCode: ''
      },
      formRules: {
        msgCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        passwordReset: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ]
      },
      time: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    })
  },
  methods: {
    codeTimer () {
      this.time = 60
      timer = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    async sendCode () {
      try {
        await this.$axios.post(toSendMsg, { content: { mobile: this.userInfo.mobile, isReset: true } })
        this.codeTimer()
        this.$message.success('短信验证码已发送')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    confirm () {
      this.$refs.editForm.validate(async (valid) => {
        try {
          if (valid) {
            await this.$axios.post(toResetPassword, { content: { ...this.form, mobile: this.userInfo.mobile, password: hex_md5_salt(encodeURIComponent(this.form.password)), passwordReset: hex_md5_salt(encodeURIComponent(this.form.passwordReset)) } })
          }
          this.$message.success('修改成功！')
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
  }
} 
</script>

<style lang="scss" scoped>
.edit {
  padding: 0 32px 16px;
}
.edit-container {
  width: 100%;
  padding: 0 24px;
  background: #fff;
  border-radius: 4px;
}
.edit-header {
  padding: 24px 0;
  border-bottom: 1px solid #CBCBCB;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.edit-form {
  padding: 24px 0;
  .el-input {
    width: 400px;
  }
}
.edit-form-handle {
  padding-right: 10px;
  color: #FF0000;
  cursor: pointer;
  &.disabled {
    color: #999;
  }
}
</style>
